<template>
  <div style="padding: 20px">
    <el-card>
      <div slot="header">
        <span>新增参会企业</span>
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px"
          @click="back"
          >返回</el-button
        >
        <el-button
          type="text"
          style="float: right; padding: 0px; margin-left: 14px"
          @click="btnOk"
          >保存</el-button
        >
      </div>

      <div style="margin-top: 20px">
        <el-form ref="form" :model="selCompanyQuery" label-width="120px">
          <el-row :gutter="10">
            <el-col :span="10">
              <div class="searchKey">
                <el-form-item label="企业名称">
                  <el-input
                    @input="onEnterpriseNameInput"
                    v-model="selCompanyQuery.name"
                    placeholder=""
                    style="width: 75%"
                  ></el-input>
                </el-form-item>
                <el-form-item label="或会员ID">
                  <el-input
                    @input="onEnterpriseUidInput"
                    v-model="selCompanyQuery.uid"
                    placeholder=""
                    style="width: 75%"
                  ></el-input>
                </el-form-item>
                <el-form-item label="" style="margin-top: 20px">
                  <el-button type="primary" @click="btnOk">保存</el-button>
                  <el-button @click="back">返回</el-button>
                </el-form-item>
              </div>
            </el-col>
            <cl-col :span="12">
              <!-- <div class="companyWrap companyNo">没有找到对应的公司。</div> -->
              <el-table
                :data="selCompanyList"
                style="width: 50%"
                highlight-current-row
                @row-click="handleRowClick"
              >
                <el-table-column width="120" label="ID" align="center">
                  <template slot-scope="scope">
                    <el-radio
                      v-model="selCompanyQuery.uid"
                      :label="scope.row.uid"
                    ></el-radio>
                  </template>
                </el-table-column>
                <el-table-column prop="prop" label="公司名称" width="width">
                  <template slot-scope="scope">
                    <el-link type="primary" :href="scope.row.personalLink">{{
                      scope.row.name
                    }}</el-link>
                  </template>
                </el-table-column>
                <el-table-column prop="addtime" label="添加时间" width="width" align="center">
                  <template slot-scope="scope">
                    <i icon="el-icon-time"></i>
                    {{ scope.row.addtime | dateFormat }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="refreshtime"
                  label="刷新时间"
                  width="width"
                  align="center"
                >
                  <template slot-scope="scope">
                    <i icon="el-icon-time"></i>
                    {{ scope.row.refreshtime | dateFormat }}
                  </template>
                </el-table-column>
              </el-table>
            </cl-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { selCompanyApi, addCompanyApi } from "@/api/application";
export default {
  data() {
    return {
      selCompanyQuery: {
        name: "",
        uid: "",
      },
      addCompanyQuery: {
        jobfairId: '',
        uid: "",
      },
      jabfairId: "",
      selCompanyList: [],
      selectedRows: [],
    };
  },
  created() {
       // 优先从路由 query 获取，如果没有则从 localStorage 获取
    this.addCompanyQuery.jobfairId = this.$route.query.jobfairId || localStorage.getItem('currentJobfairId');
  },
  mounted() {
    // this.$bus.$on("addCompanyList", (jabfairId) => {
    //   console.log("新增页面已收到", jabfairId);
    //   this.addCompanyQuery.jabfairId = jabfairId;
    //   console.log(this.addCompanyQuery);
    // });
  },
  // beforeCreate() {
  //   this.$bus.$off("addCompanyList");
  // },
  methods: {
    // 输入企业名称
    async onEnterpriseNameInput(e) {
      console.log(e);
      this.selCompanyQuery.name = e;
      console.log(this.selCompanyQuery);
      this.selCompany();
    },
    // 输入会员ID
    async onEnterpriseUidInput(e) {
      console.log(e);
      this.selCompanyQuery.uid = e;
      console.log(this.selCompanyQuery);
      this.selCompany();
    },
    async selCompany() {
      const res = await selCompanyApi(this.selCompanyQuery);
      console.log(res);
      this.selCompanyList = res.records;
    },
    back() {
      this.$router.back();
    },
    // 选择当前行
    handleRowClick(row, column, event) {
      console.log(row);
      this.selCompanyQuery.uid = row.uid;
      this.addCompanyQuery.uid = row.uid;
      // console.log(this.addCompanyQuery);
      console.log(this.addCompanyQuery);
    },
    // 保存
    async btnOk() {
      if (this.selCompanyQuery.uid === "") {
        this.$message.error("请选择企业");
        return
      }
      try {
        const res = await addCompanyApi(this.addCompanyQuery);
        if (res.code === 1) {
          this.$message.success("添加成功!");
          this.$router.go(-1)
        } else {
          this.$message.error("已经重复添加了该企业");
        }
      } catch {
        this.$message.error("添加失败");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.searchKey {
  background: #f5f7f8;
  padding: 24px 0 2px;
  border: 1px solid #dfdfdf;
  border-right: 0;
}
.companyWrap {
  padding: 66px 20px;
  color: #06c;
  border: 1px solid #dfdfdf;
  // transform: translateX(15px);
}
</style>
